<template>
    <div class="find-container">
        <div class="serachStyle">
            <el-select v-model="searchValue" multiple filterable remote reserve-keyword placeholder="请输入搜索内容"
                style="width:100%" :remote-method="remoteMethod" :loading="loading" @change="onSearch"> <el-option
                    v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
            <!-- <el-button @click="onSearch">搜索</el-button> -->
        </div>

        <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleTabClick">
            <el-tab-pane label="全部" name="0"></el-tab-pane>
            <template v-for="(tab, index) in tabs">
                <el-tab-pane :label="tab.collectionName" :name="tab.id"></el-tab-pane>
            </template>
        </el-tabs>

        <template v-for=" (sr,i) in secherResult">
            <div class="flex-container">
                <div class="flex-item" @click="openInfo(sr)">

                    <img v-if="sr.articleType == '0' || sr.articleType == '3'" :src="sr.image" class="image show_hand" />

                    <video v-else :src="sr.image" class="video show_hand"></video>
                </div>
                <div class="flex-item-content">
                    <div class="content-header " @click="openInfo(sr)">
                        <span class="show_hand">{{ sr.title }}</span>
                        </div>
                    <div class="content-intro " @click="openInfo(sr)">
                       <span class="show_hand"> {{ sr.articleAbstract }}</span>
                    </div>
                    <div class="content-bottom" v-if="sr.articleType == '3'">
                        <div class="flex-content-bottom">
                            <div style="float: left;">
                                <el-image :src="mony" class="icon_image"></el-image>
                            </div>
                            <div style="float: left;font-size: 20px;color: #e4393c;">
                                {{ sr.price }}
                            </div>
                        </div>
                    </div>
                    <div class="content-bottom">
                        <div class="flex-content-bottom" v-if="sr.articleType == '1' || sr.articleType == '0'">
                            <div style="font-size: 12px;color: red;" v-if="sr.isCollect == '1'">
                                <el-icon style="font-size: 10px;!important">
                                    <ele-CircleCheck />
                                </el-icon>
                                已收藏
                            </div>

                            <div v-else style="font-size: 12px;" @click="collectArticle(sr,i)">
                                <el-icon style="font-size: 10px;!important">
                                    <ele-CirclePlus />
                                </el-icon>
                                加收藏
                            </div>
                        </div>

                        <div class="flex-content-bottom" v-if="sr.articleType == '3'">
                            <div style="float: left;">
                                评分：
                            </div>
                            <div style="float: left;">
                                <el-image :src="newRate" class="icon_image"></el-image>
                            </div>
                            <div style="float: left;">
                                <el-image :src="newRate" class="icon_image"></el-image>
                            </div>
                            <div style="float: left;">
                                <el-image :src="newRate" class="icon_image"></el-image>
                            </div>
                        </div>
                        <div class="flex-content-bottom " v-if="sr.articleType == '1' || sr.articleType == '0'">
                            <div style="float: left;margin-right: 10px;font-size: 12px">
                                作者: {{ sr.author }}
                            </div>
                            <div style="float: left;" @click="openUserCard(sr)">
                                <el-image :src="Postcard" class="icon_image"></el-image>
                            </div>

                        </div>
                        <div class="flex-content-bottom " @click="openStore(sr)" v-if="sr.storeName != null">
                            {{ sr.articleType == '3' ? '店铺' : '公司' }}: {{ sr.storeName }}
                        </div>
                    </div>
                </div>
            </div>
        </template>

        <el-empty description="暂时没有推荐" v-if="secherResult.length < 1" />

        <!-- 播放视频 -->
        <el-dialog v-model="dialogPlayerVisible" title="播放" @close="closeVideo">
            <video :src="playerUrl" ref="playerVideo" style="width:100%;height:500px" controls autoplay></video>
        </el-dialog>
        <card-detail v-model:dialogDrawer="dialogFormVisible" :defaultForm="cardForm" ></card-detail>
    </div>
</template>
  
<script>
import { reactive, toRefs, onMounted, ref, nextTick } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import praise from '/@/assets/praise.svg'
import newRate from '/@/assets/rate.svg'
import mony from '/@/assets/mony.svg'
import mony2 from '/@/assets/mony2.svg'
import Postcard from '/@/assets/Postcard.svg'
import { getAllList, getCollectionList } from '/@/api/ws/articleClass'
import { searchArticle, searchText, upvote } from '/@/api/ws/article'
import { useChatApi } from "/@/api/chat/index";
import CardDetail from '../articlerDetail/CardDetail.vue'

import { useRouter } from 'vue-router'
export default {
    name: 'HomeAdv',
    components: {
        CardDetail
    },
    setup() {
        const state = reactive({
            options: [],
            loading: false,
            activeName: '0',
            searchValue: null,
            tabs: [],
            searchParams: {
                keyword: null,
                articleType: null,
                pageNum: 0,
                size: 10,
                collectionTypeId: null
            },
            secherResult: [],
            //视频播放
            dialogPlayerVisible: false,
            playerUrl: null,
            // 名片信息
            dialogFormVisible:false,
            cardForm:{userId:null}
        })
        const router = useRouter()
        const chatApi = useChatApi();
        const remoteMethod = (query) => {
            state.options = []
            if (query) {
                state.loading = true
                searchText(query).then(res => {
                    if (res.code == 0) {
                        nextTick(() => {
                            let array = []
                            for (let d of res.data) {
                                array.push({ label: d, value: d })
                            }
                            state.options = array
                        })
                    }

                    state.loading = false
                })


            }
        }
        const handleTabClick = (tab, event) => {
            state.searchParams.collectionTypeId = tab.props.name == '0' ? null : tab.props.name
            searchInfo();
        }
        const onSearch = () => {
            if (state.searchValue != null && state.searchValue.length > 0) {
                let keyword = ''
                for (let s of state.searchValue) {
                    keyword += s
                }
                state.searchParams.keyword = keyword
                state.searchParams.pageNum = 1
                searchInfo()
            }

        }

        const searchInfo = async () => {
            // 文章视频
            let res = await searchArticle(state.searchParams)
            console.log(res.data.pageNum)
            console.log(res.data.total)
            let array = []
            for (let d of res.data.products) {
                let images = d.image.split(",")
                console.log(images)
                d.image = images[0]
                array.push(d);
            }
            res = await chatApi.pmsSpuCommentpageList(state.searchParams)
            console.log(res.data.products)
            // 商品
            for (let d of res.data.products) {
                array.push({
                    articleType: '3',
                    image: d.skuImg,
                    title: d.skuTitle,
                    price: d.skuPrice,
                    id: d.skuId,
                    storeName: d.storeName,
                    enterpriseId: d.storeId
                });
            }
            console.log(array)
            state.secherResult = array
        }
        const openStore = (item) => {
            window.open("http://localhost:8080?enterpriseId=" + item.enterpriseId)
            /* ElMessage({
                message: '待开发,跳转店铺',
                type: 'warning',
            }) */
        }
        const openUserCard = (item) => {
            state.cardForm = item.userId
            state.dialogFormVisible = true
        }

        const openInfo = (item) => {
            console.log(item)
            if (item.articleType == '1') {
                state.dialogPlayerVisible = true
                state.playerUrl = item.image

            } else if ((item.articleType == '0')) {
                router.push({
                    path: '/findResource/articlerDetail',
                    query: {
                        id: item.id
                    }
                })

            } else if (item.articleType == '3') {

                window.open("http://localhost:8080/#/goods/details?productID=" + item.id+"&enterpriseId=" + item.enterpriseId)
                // ElMessage({
                // message: '待开发,跳转商品详情页',
                // type: 'warning',
                // })
            }
        }
        const closeVideo = () => {
            state.dialogPlayerVisible = false
            state.playerUrl = null
        }
        const currentDate = ref(new Date())

        const collectArticle = (item,index) => {
            
            let data = {
                articleId: item.id,
                articleName: item.title
            }
            upvote(data).then(res => {
                if (res.code == 0) {
                    ElMessage({
                        message: '已收藏',
                        type: 'success',
                    })
                    state.secherResult[index].isCollect = "1"

                }
            })
        }
        onMounted(() => {
            getCollectionList().then(res => {
                state.tabs = res.data
            })
            searchInfo()
        })
        return {
            remoteMethod,
            currentDate,
            handleTabClick,
            praise,
            newRate,
            mony2, mony,
            searchInfo,
            openInfo,
            openStore,
            closeVideo,
            onSearch,
            Postcard,
            openUserCard,
            collectArticle,
            ...toRefs(state)
        }
    }
}
</script>
  
<style lang="scss" scoped>
.find-container {
    padding: 100px 100px 0px 100px;

}

.image {
    width: 120px;
    height: 120px;
    display: block;
    object-fit: contain;
}

.icon_image {
    width: 20px;
    height: 20px;
    display: block;
}

.icon_mony_image {
    width: 15px;
    height: 15px;
    display: block;
    margin-right: 2px;
}

.icon_image_down {
    transform: rotate(180deg);
    -webkit-transform: rotateX(180deg);
}

.flex-container {
    display: -webkit-flex;
    display: flex;
    width: 100%;
    height: 150px;
    background-color: #ffffff;
    margin-bottom: 10px;
    // border: 1px solid;
    // border-radius: 15px;
    // border-color: #FFFFFF;
    // box-shadow: 10px 10px 5px #888888;
}

.flex-item {
    width: 120px;
    height: 120px;
    margin: 10px;
}

.flex-item-content {
    width: 80%;
    height: 120px;
    margin: 10px;

    .content-header {
        width: 100%;
        height: 20px;
        font-size: 16px;
        font-weight: bold;
        margin-bottom: 15px;
    }

    .content-intro {
        width: 100%;
        height: 40px;
        font-size: 14px;
        color: #999;

    }

    .content-bottom {
        width: 100%;
        height: 30px;
        display: -webkit-flex;
        display: flex;

        .flex-content-bottom {
            margin-right: 20px;
            color: #999;
            cursor: pointer;
        }

        .flex-content-bottom:hover {
            color: red;
        }
    }
}

.serachStyle {
    text-align: center;
    padding: 0px 25% 0px 25%;
}

.video {
    width: 120px;
    height: 120px;
    cursor: pointer;
}

.show_hand {
    cursor: pointer;
}

.show_hand:hover {
    color: red;
}
</style>